<template>
  <div class="register">
    <Header title="注册"></Header>
    <div v-mx v-mt>
      <Field v-model="phone" placeholder="请输入手机号码" />
      <Field v-model="password" type="password" showPassword placeholder="请输入密码" />
      <Field v-mt v-model="vailCode" type="password" placeholder="请输入验证码">
        <div slot="addon" v-ml>
          <Button v-px="12" v-py="12"
          is-send-code
          :sendPhoneNo="phone"
          type="primary" round/>
        </div>
      </Field>
      <Button v-my @click="submit" class="register-btn" type="primary" block round>注册</Button>
      <Button type="primary"  outline to="/login" block round>登录</Button>
      <p v-mt>
        <input v-model="argument" type="checkbox"> 已阅读并同意以下协议
        <router-link to="/pro">《乐器商城协议》</router-link>
      </p>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import Field from "../components/Field.vue";
import Button from "../components/Button.vue";
import { isEmpty } from "lodash";
export default {
  data() {
    return {
      phone: "",
      password: "",
      vailCode: "",
      argument: false
    };
  },
  components: {
    Header,
    Field,
    Button
  },
  methods: {
    _vaildate() {
      if (isEmpty(this.phone)) {
        return "手机号码不能为空";
      }
      if (!/1[3578]\d{9}$/.test(this.phone)) {
        return "手机号码格式不正确";
      }
      if (isEmpty(this.password)) {
        return "密码不能为空";
      }
      if (isEmpty(this.vailCode)) {
        return "验证码不能为空";
      }
      if (!this.argument) {
        return '同意协议'
      }
    },
    submit(){
      const err = this._vaildate();
      if (err) {
        alert(err);
        return;
      }
      this.$service.register({
        phone: this.phone,
        password: this.password,
        vailCode: this.vailCode
      }).then(data=>{
        alert('注册成功!')
        this.$router.push('/login');
      })
    },
  }
};
</script>

